<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .s_box{width: 400px;height: 300px;position: absolute;}
        .s_box img{width: 400px;height: 300px;}
        .s_box span{position: absolute;left:0;top:0;background: rgba(200,200,200,0.5);display: none}
        .b_box{width: 400px;height: 300px;overflow: hidden;display: none;position: absolute;right: -400px}
        .b_box img{width: 1200px;height: 900px;position: absolute;left:0;top:0;}

        .cont{width: 1000px;background: #efefef;margin: 0 auto;overflow: hidden;}
        .放大镜{border: solid 1px black;float: left;width: 400px;position: relative}
        .商品信息{float: right;width: 500px;}

        .商品信息 .color ul{margin: 0;padding: 0;list-style: none;display: flex;}
        .商品信息 .color ul li{width: 40px;height: 40px;text-align: center;line-height: 40px;border: solid 1px black;margin: 0 20px;}


    </style>
</head>
<body>
    <div class="cont">
        <!-- <div class="放大镜">
            <div class="s_box">
                <img src="https://img10.360buyimg.com/n7/jfs/t1/109383/15/11613/242507/5e8c4c3dE901f4367/723da17587f13bb7.jpg" alt="">
                <span></span>
            </div>
            <div class="b_box">
                <img src="https://img10.360buyimg.com/n7/jfs/t1/109383/15/11613/242507/5e8c4c3dE901f4367/723da17587f13bb7.jpg" alt="">
            </div>
        </div>
        <div class="商品信息">
            <h3>商品名称</h3>
            <p>商品描述：<span></span></p>
            <p>商品价格：<span></span></p>
            <p>商品数量：<span></span></p>
            <div class="color">商品颜色：
                <ul>
                    <li title="红"></li>
                    <li title="绿"></li>
                    <li title="蓝"></li>
                </ul>
            </div>
            <input type="button" value="加入购物车">
        </div> -->
    </div>
</body>
<script src="./js/jquery.js"></script>
<script>
    // console.log(location.search.split("=")[1])
    const id = location.search.split("=")[1];

    $.ajax({
        url:"./data/goods.json",
        success:(res)=>{
            res = JSON.parse(res)
            // console.log(res)
            let i = 0;
            res.some((val,idx)=>{
                i = idx
                return val.proId === id;
            })
            // console.log(res[i])
            render(res[i]);
        }
    })


    function render(data){

        let str = `<div class="放大镜">
                    <div class="s_box">
                        <img src="${data.url}" alt="">
                        <span></span>
                    </div>
                    <div class="b_box">
                        <img src="${data.url}" alt="">
                    </div>
                </div>
                <div class="商品信息">
                    <h3>商品名称：<span>${data.name}</span></h3>
                    <p>商品价格：￥<span>${data.price}</span></p>
                    <p>商品数量：<span>${data.num}</span></p>
                    <div class="color">商品颜色：
                        <ul>
                            ${createColor(data.color)}
                        </ul>
                    </div>
                    <input type="button" value="加入购物车">
                </div>`;

        $(".cont").html(str);

        new Big({
            sBox:document.querySelector(".s_box"),
            bBox:document.querySelector(".b_box"),
            bBimg:document.querySelector(".b_box img"),
            sBspan:document.querySelector(".s_box span")
        });

    }

    function createColor(data){
        let str = ""
        for(var i=0;i<data.length;i++){
            str += `<li title="${data[i].title}" style="background:${data[i].msg}"></li>`
        }
        return str;
    }




    function Big(ops){
        // 选择元素
        this.sBox = ops.sBox;
        this.sBspan = ops.sBspan;
        this.bBox = ops.bBox;
        this.bBimg = ops.bBimg;
        // 绑定事件
        this.addEvent()
    }
    Big.prototype.addEvent = function(){
        const that = this;
        // 绑定进入
        this.sBox.onmouseover = function(){
            // 显示
            that.show()
        }
        // 绑定离开
        this.sBox.onmouseout = function(){
            // 隐藏
            that.hide()
        }
        // 绑定移动
        this.sBox.onmousemove = function(eve){
            const e = eve || window.event;
            // 移动
            that.move(e);
        }
    }
    Big.prototype.show = function(){
        this.bBox.style.display = "block";
        this.sBspan.style.display = "block";
        // 设置span的尺寸
        // 提醒一定要在显示之后设置，否则，显示之前无法获取css样式
        // 提前获取各种尺寸
        this.sbw = this.sBox.offsetWidth;
        this.sbh = this.sBox.offsetHeight;
        this.bbiw = this.bBimg.offsetWidth;
        this.bbih = this.bBimg.offsetHeight;
        this.bbw = this.bBox.offsetWidth;
        this.bbh = this.bBox.offsetHeight;

        // 计算并设置span的尺寸
        this.sBspan.style.width = this.sbw / (this.bbiw / this.bbw) + "px";
        this.sBspan.style.height = this.sbh / (this.bbih / this.bbh) + "px";
    }
    Big.prototype.hide = function(){
        this.bBox.style.display = "none";
        this.sBspan.style.display = "none";
    }
    Big.prototype.move = function(e){
        // e.offsetX
        // e.offsetY
        // this.sBspan.style.left = e.offsetX + "px"
        // this.sBspan.style.top = e.offsetY + "px"

        // 计算当前移动的距离
        let l = e.pageX - this.sBox.offsetLeft - this.sBspan.offsetWidth / 2;
        let t = e.pageY - this.sBox.offsetTop - this.sBspan.offsetHeight / 2

        // 边界限定
        if(l < 0) l = 0;
        if(t < 0) t = 0;
        if(l > this.sbw - this.sBspan.offsetWidth){
            l = this.sbw - this.sBspan.offsetWidth
        }
        if(t > this.sbh - this.sBspan.offsetHeight){
            t = this.sbh - this.sBspan.offsetHeight
        }

        // 设置span的跟随效果
        this.sBspan.style.left = l + "px";
        this.sBspan.style.top = t + "px";

        // 计算比例
        // 当前移动的距离 / 一共能移动的距离
        let x = l / (this.sbw - this.sBspan.offsetWidth);
        let y = t / (this.sbh - this.sBspan.offsetHeight);
        // console.log(x, y)

        // 跟随移动
        // 当前移动的距离 = 总距离 * 比例
        this.bBimg.style.left = (this.bbw - this.bbiw) * x + "px";
        this.bBimg.style.top = (this.bbh - this.bbih) * y + "px";
    }
</script>
</html>